<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<canvas id="canvas" style="border: 1px solid #aaa; display: block;margin: 50px auto;">
			浏览器不支持canvas
			
		</canvas>
	</body>
	<script>
		var canvas = document.getElementById("canvas");   
        canvas.width = 800;   
        canvas.height = 800;   
        var context = canvas.getContext("2d"); 
   
   //CanvasRenderingContext2D.prototype.XXX 构建自己 XXX 的函数,给原型模板增加方法（函数）
   CanvasRenderingContext2D.prototype.fillStar =function(r,R,x,y,rot){
   	this.beginPath();//this
	for(var i=0; i<5; i++){//计算5个点
		this.lineTo(Math.cos((18+i*72-rot)/180*Math.PI)*R+x,//依然依赖于moveTo
									 -Math.sin((18+i*72-rot)/180*Math.PI)*R+y);
	 	this.lineTo(Math.cos((54+i*72-rot)/180*Math.PI)*r+x,
									 -Math.sin((54+i*72-rot)/180*Math.PI)*r+y);
	}
	this.closePath();
	this.fill();

   }
   //修改
   var originalMove = CanvasRenderingContext2D.prototype.moveTo;//获取moveTo原型
   CanvasRenderingContext2D.prototype.lastMoveToLoc={};//声明原型变量
   CanvasRenderingContext2D.prototype.moveTo =function(x,y){
   	originalMove.apply(context,[x,y]);//moveTo方法覆盖
   	this.lastMoveToLoc.x=x;
   	this.lastMoveToLoc.y =y;
   }
   CanvasRenderingContext2D.prototype.fillStarTwo =function(r,R,rot){
   	this.beginPath();//this
	for(var i=0; i<5; i++){//计算5个点
		this.lineTo(Math.cos((18+i*72-rot)/180*Math.PI)*R+this.lastMoveToLoc.x,
									 -Math.sin((18+i*72-rot)/180*Math.PI)*R+this.lastMoveToLoc.y);
	 	this.lineTo(Math.cos((54+i*72-rot)/180*Math.PI)*r+this.lastMoveToLoc.x,
									 -Math.sin((54+i*72-rot)/180*Math.PI)*r+this.lastMoveToLoc.y);
	}
	this.closePath();
	this.fill();

   }
  ////////////////////////////////////// 
   //使用自己的函数fillStar绘图
   context.fillStyle="#FF0000";
  // context.fillStar(150,300,400,400,0);
  
  //
  context.fillStyle="#058";
  context.moveTo(400,400);//位置
  context.fillStarTwo(150,300,0)
	</script>
</html>
